<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back">
			<view class="diwen_box">
				<image class="diwen_img" src="../../../static/img/zhunxiangfuwu/tequan_up.png"></image>
			</view>
		</view>
		<!--顶部导航-->
		<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-color="#A3A4A5" text-color="#FFF" :statusBar="true" title="特权介绍" backgroundColor="transparent" :border="false"></uni-nav-bar>
		
		
		<template>
			<u-scroll-list :indicator="false" :left="scrollleft">
				<view v-for="(item, index) in list" :key="index" class="hua_box" @click="chooes_tab(index)">
					<view class="tab_img_box">
						<image class="tab_img" :src="item.thumb"></image>
						<text :class="{'tab_text': index == tab_index, 'tab_text_false': index != tab_index}">{{item.text}}</text>
					</view>
					<!-- 最后一个ccs需要占位 -->
					<view v-if="list.length == index+1" class="right_width"></view>
				</view>
				
			</u-scroll-list>
		</template>
		   
			 
			 <template>
			     <!-- #ifndef APP-NVUE || MP-TOUTIAO -->
			     <view class="u-demo-block">
			         <u-swiper
			                 :list="list3"
			                 previousMargin="30"
			                 nextMargin="30"
			                 circular
			                 :autoplay="false"
			                 radius="5"
			                 bgColor="transparent"
							 height="450"
							 @change="change"
							 :current="tab_index"
							 :znswiper="true"
			         ></u-swiper>
			     </view>
			     <!-- #endif -->
			 </template>
		
		<view style="height: 340upx;"></view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tab_index: 0,	// 滑块选中哪个 
				list: [{
					thumb: "/static/img/zhunxiangfuwu/1.png",
					text:'免费纸尿裤'
				}, {
					thumb: "/static/img/zhunxiangfuwu/22.png",
					text:'线上早教课'
				}, {
					thumb: "/static/img/zhunxiangfuwu/33.png",
					text:'运费卷'
				}, {
					thumb: "/static/img/zhunxiangfuwu/44.png",
					text:'5折加购'
				}, {
					thumb: "/static/img/zhunxiangfuwu/55.png",
					text:'全球通用'
				}, {
					thumb: "/static/img/zhunxiangfuwu/66.png",
					text:'在线育儿师'
				}, {
					thumb: "/static/img/zhunxiangfuwu/77.png",
					text:'30天退换'
				}, {
					thumb: "/static/img/zhunxiangfuwu/77.png",
					text:'30天退换'
				}],
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				scrollleft: 0,	// 滑块移动的起始位置
			}
		},
		onLoad() {
			
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
				    delta: 1
				});
			},
			chooes_tab(index){
				console.log(index);
				this.tab_index = index;	// 滑块选中哪个 
			},
			change(e){
				this.scrollleft = (e.current % 8) * 90;
				this.tab_index = e.current;	// 滑块选中哪个 
				console.log(this.scrollleft)
			}
			
		}
	}
</script>

<style>
	page{
		background: linear-gradient(226deg, #27292A 0%, #1D2022 100%);
	}
	.page_back{
		width: 100%;
		/* height: 648upx; */
		background: linear-gradient(360deg, rgba(48, 172, 255, 0) 0%, #3EB2FF 50%, #58BCFF 100%);
		position: fixed;
		z-index: -100;
	}
	.diwen_box{
		box-sizing: border-box;
		position: absolute;
		width: 488upx;
		height: 626upx;
		left: 0upx;
		top: 0upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.diwen_img{
		width: 488upx;
		height: 626upx;
	}
	.hua_box{
		/* background-color: #FF4E2F; */
		width: 604upx;
		/* height: 90upx; */
		margin: 84upx 0 0 60upx;
		display: flex;

	}
	.tab_img_box{
		width: 120upx;
		/* height: 90upx; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* background-color: #18BC37; */
	}
	.tab_img{
		width: 90upx;
		height: 90upx;
	}
	.right_width{
		margin-left: 33upx;
		background-color: #18BC37;
	}
	.tab_text{
		margin-top: 12upx;
		height: 34upx;
		/* width: 120upx; */
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFF9F1;
		line-height: 34upx;
	}
	.tab_text_false{
		margin-top: 12upx;
		height: 34upx;
		/* width: 120upx; */
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFF9F1;
		line-height: 34upx;
		text-align: center;
		opacity: 0.5;
	}
	
	.u-demo-block{
		margin-top: 44upx;
		/* height: 1900upx; */
	}
	.banner_box{
		width: 580upx;
		height: 900upx;
		background-color: #FFC28D;
	}
</style>
